<template>
  <view class="tab-content" :style="{ backgroundColor: backgroundColor }">
    <scroll-view scroll-x>
      <view class="tabs-box" :style="{ backgroundColor: backgroundColor }">
        <view
          v-for="(item, index) in tabsListConfig"
          :key="index"
          @click="handleClick(item.name)"
        >
          <view
            v-if="checkPermit(item.hasPermit) || ['*:*:*']"
            :class="['tabs-item', active === item.name ? 'active-item' : '']"
            :style="{
              color: active === item.name ? tabActiveColor : tabItemColor,
              fontSize: active === item.name ? tabActiveSize : '28rpx'
            }"
          >
            <view class="item">{{ item.label }}</view>
            <view class="line-box" :style="{ width: bottomLineWidth }">
              <view
                class="label-line"
                :style="{
                  backgroundColor: bottomLineColor,
                  borderRadius: lineBorderRadius
                }"
                v-if="active === item.name"
              ></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import { checkPermit } from "@/utils/permission"; // 权限判断函数
  export default {
    name: 'YouTabs',
    data() {
      return {
        tabsListConfig: [],
        active: '',
        listHeight: '',
        checkPermit
      }
    },
    props: {
      activeName: {
        type: [Number, String],
        default: ''
      },
      fontSize:{
        type: String,
        default: '28rpx'
      },
      tabsList: {
        type: Array,
        default: []
      },
      backgroundColor: { // 背景色
        type: String,
        default: '#FFF'
      },
      tabItemColor: { // 单个tab的字体色
        type: String,
        default: '#333'
      },
      tabActiveColor: { // 单个tab选中的字体色
        type: String,
        default: '#115BAA'
      },
      tabActiveSize: {
        type: String,
        default: '28rpx'
      },
      bottomLineColor: { // 下划线的颜色
        type: String,
        default: '#115BAA'
      },
      bottomLineWidth: {
        type: String,
        default: '30%'
      },
      lineBorderRadius: {
        type: String,
        default: '4rpx'
      }
    },
    computed: {
    },
    watch: {
      activeName: {
        handler(newVal, oldVal) {
          this.active = newVal
        },
        deep: true
      },
      tabsList: {
        handler(newVal, oldVal) {
          this.tabsListConfig = [...newVal]
          this.getActive()
        },
        deep: true
      }
    },
    created() {
      this.tabsListConfig = uni.$u.deepClone(this.tabsList)
      this.active = this.activeName
      this.getActive()
    },
    methods: {
      checkScroll() {
        if (!this.$refs.tabList) return
        const box = this.$refs.tabList
        const hasHorizontalScrollbar = box.scrollWidth > box.clientWidth

        if (hasHorizontalScrollbar) {
          this.listHeight = '38px'
        } else {
          this.listHeight = '42px'
        }
      },
      getActive() {
        const permissionFlag = []
        this.tabsListConfig.forEach(item => {
          if (item.hasPermit) {
            permissionFlag.push(item.hasPermit[0])
          }
        })
        if (permissionFlag.length === 0) return
        const permissions = uni.getStorageSync('userInfo').permissions
        if (permissions[0] === '*:*:*') {
          return
        }

        const hasPermissions = permissions.filter(permission => {
          return permissionFlag.includes(permission)
        })

        this.tabsListConfig = this.tabsListConfig.filter(item => {
          if (item.hasPermit) {
            return hasPermissions.includes(item.hasPermit[0])
          }
        })
        if (this.tabsListConfig.length === 0) return
        this.active = this.tabsListConfig[0].name
        this.handleClick(this.active)
      },
      handleClick($event) {
        this.$emit('tabClick', $event)
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import '@/static/scss/uni.scss';
  .tab-content {
    height: 48px;
    padding-bottom: 8px;
    margin-bottom: 2px;
  }
  .tabs-box {
		height: 40px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #fff;
    .tabs-item {
      position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
    }
    .active-item {
      font-weight: bold;
    }
    .line-box {
      position: absolute;
      left: 50%;
      bottom: -16rpx;
      height: 8rpx;
      transform: translateX(-50%);
      .label-line {
        width: 100%;
        height: 8rpx;
        animation: scaleAnimation .3s linear;
      }
    }
  }
  @keyframes scaleAnimation {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
</style>